<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2024/11/25
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首页</title>
    <style>
      body{
        margin: 0;
      }
      h1.welcome{
        text-align: center;
        margin: 10px auto;
        font-family: Microsoft YaHei, serif ;
        color: black;
      }
      div.form-container{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      label{
        font:25px Microsoft YaHei ;
        display: block;
        margin-bottom: 5px;
      }
      input{
        width:300px;
        font:20px Microsoft YaHei ;
        background-color: #F7F8FC;
        border-radius: 5px;
        margin-bottom: 10px;
      }
      input.login{
        border: 0;
        padding:10px 100px;
        font:25px Microsoft YaHei ;
        background-color: #e85356;
        border-radius: 5px;
      }
      input.login:hover{
        background-color: red;
      }
      div.login{
        margin: 10px 0;
      }
      form{
        padding:10px 200px;
        border-radius: 5px;
        box-shadow: #f0f0f0 0 0 5px 5px;
      }
      #code-container{
        display: flex;
        justify-self:center;
        align-items: center;
      }
      span.wrong{
        font-size: 18px;
        color: #FF5152;
        margin-top: 6px;
      }
    </style>
    <script src="static/js/jquery-1.7.2.js"></script>
    <script>
      $(function () {
          $("#code-container a").click(function (e) {
            e.preventDefault();
            $("div img").attr("src","codeImg.jsp?"+Math.random())
          });
      });
    </script>
  </head>
  <body>
  <h1 class="welcome">欢迎来到电视机信息管理</h1>
  <div class="form-container">
    <form action="/221210400201/login" method="post">
      <label for="username">用户名：</label>
      <input type="text" name="username" id="username" value="${cookie.username.value}" placeholder="请输入用户名" required>
      <label for="password">密码：</label>
      <input type="password" name="password" id="password" placeholder="请输入密码" required>
      <label for="code">验证码：</label>
      <div id="code-container">
        <input type="text" name="code" id="code" placeholder="请输入验证码" required>
        <img src="codeImg.jsp">
        <a href="">看不清</a>
      </div>
      <div class="login">
        <input type="hidden" name="action" value="login"/>
        <input class="login" type="submit" value="登录"/>
        <span class="wrong">${wrong}</span>
      </div>
    </form>
  </div>
  </body>
</html>
